<template>
  <div class="remote-select-container">
    <el-select
      :disabled="disabled"
      ref="vref"
      :multiple="isMultiple"
      :filterable="isFilterable"
      v-model="data.value"
      remote
      reserve-keyword
      placeholder="请选择"
      :remote-method="remoteMethod"
      @click="click"
      @change="change"
      :loading="data.loading"
    >
      <el-option
        v-for="(item, index) in data.options"
        :key="index"
        :label="filterLable(item)"
        :value="filterValue(item)"
      ></el-option>
    </el-select>
  </div>
</template>
<script setup>
  import { reactive, computed, ref, nextTick } from 'vue'
  import { isObject } from 'lodash-es'
  const props = defineProps({
    defaults: [Object, Array],
    itemList: Array,
    modelValue: [Number, String, Array],
    isMultiple: Boolean,
    label: String,
    isFilterable: Boolean,
    type: String,
    disabled: Boolean,
  })
  const emit = defineEmits([
    'loadData',
    'update:modelValue',
    'update:label',
    'change',
    'seachData',
  ])
  const data = reactive({ value: null, options: [], loading: false })
  data.options = computed(() => {
    if (props.itemList && props.itemList.length > 0) {
      console.log('props.itemList =' + JSON.stringify(props.itemList))
      return props.itemList
    }
    if (Array.isArray(props.defaults)) {
      return props.defaults
    }
    if (isObject(props.defaults)) {
      return [props.defaults]
    }
    return []
  })
  data.value = computed({
    get() {
      if (props.isMultiple) {
        if (props.modelValue) {
          return Array.isArray(props.modelValue)
            ? props.modelValue
            : [props.modelValue]
        }
        return []
      }
      return props.modelValue
    },
    async set(value) {
      if (!Array.isArray(value)) {
        const item = data.options.find((e) => {
          return e.value === value
        })
        if (item) emit('update:label', item.label)
      }
      //
      await nextTick()
      emit('update:modelValue', value)
    },
  })

  const remoteMethod = function (val) {
    console.log('输入文本 ' + val)
    data.loading = true
    const cb = function () {
      data.loading = false
    }
    emit('seachData', { val, cb })
    emit('loadData', cb)
  }
  const click = function () {
    remoteMethod()
  }
  const vref = ref(null)
  const focus = function () {
    vref.value.focus()
  }
  const change = function (val) {
    console.log('选项改变' + JSON.stringify(val))
    emit('change', val)
  }
  const filterLable = computed(() => (item) => {
    if (!props.type) return item.label
    if (props.type === 'icd') return item.name
    return item
  })
  const filterValue = computed(() => (item) => {
    if (!props.type) return item.value
    if (props.type === 'icd') return item.name
    return item
  })
</script>
<style lang="scss" scoped>
  .remote-select-container {
    display: flex;
    width: 100%;

    .el-select {
      width: 100%;
    }
  }
</style>
